<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客户管理档案表</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#2563eb',
                        secondary: '#64748b',
                        accent: '#f59e0b',
                        success: '#10b981',
                        danger: '#ef4444',
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                },
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .step-active {
                @apply bg-primary text-white border-primary;
            }
            .step-completed {
                @apply bg-success text-white border-success;
            }
            .step-pending {
                @apply bg-gray-200 text-gray-600 border-gray-300;
            }
            .form-input-focus {
                @apply focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-300;
            }
            .btn-primary {
                @apply bg-primary hover:bg-primary/90 text-white font-semibold py-3 px-6 rounded-lg transition-all duration-300 transform hover:scale-105 shadow-lg;
            }
            .btn-secondary {
                @apply bg-gray-200 hover:bg-gray-300 text-gray-700 font-semibold py-3 px-6 rounded-lg transition-all duration-300 transform hover:scale-105;
            }
            .card-shadow {
                @apply shadow-xl hover:shadow-2xl transition-all duration-300;
            }
        }
    </style>
    <style>
        /* 确保在所有环境下都能正常显示 */
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            min-height: 100vh;
            background: linear-gradient(135deg, #eff6ff 0%, #e0e7ff 100%);
        }
        .step-content {
            display: none;
        }
        .step-content:first-child {
            display: block;
        }
        .error-message {
            color: #ef4444;
            font-size: 0.75rem;
            margin-top: 0.25rem;
        }
        .notification {
            position: fixed;
            top: 1rem;
            right: 1rem;
            padding: 1rem 1.5rem;
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            z-index: 50;
            transform: translateX(100%);
            transition: transform 0.3s ease-in-out;
        }
        .notification.show {
            transform: translateX(0);
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <nav class="bg-white shadow-lg sticky top-0 z-40">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center space-x-4">
                    <div class="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
                        <i class="fa fa-users text-white text-lg"></i>
                    </div>
                    <h1 class="text-xl font-bold text-gray-900">客户管理档案表</h1>
                </div>
                <div class="text-sm text-gray-600">
                    <i class="fa fa-qrcode mr-2"></i>
                    微信扫码填写
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <!-- 进度指示器 -->
        <div class="mb-8">
            <div class="flex justify-between items-center">
                <div class="flex items-center space-x-2" id="step1-indicator">
                    <div class="w-8 h-8 rounded-full border-2 step-active flex items-center justify-center">
                        <i class="fa fa-user text-sm"></i>
                    </div>
                    <span class="text-sm font-medium text-primary">客户信息</span>
                </div>
                <div class="flex-1 mx-4 h-1 bg-gray-200 rounded-full">
                    <div class="h-full bg-primary rounded-full transition-all duration-500" id="progress-bar" style="width: 25%"></div>
                </div>
                <div class="flex items-center space-x-2" id="step2-indicator">
                    <div class="w-8 h-8 rounded-full border-2 step-pending flex items-center justify-center">
                        <i class="fa fa-car text-sm"></i>
                    </div>
                    <span class="text-sm font-medium text-gray-600">购车需求</span>
                </div>
                <div class="flex-1 mx-4 h-1 bg-gray-200 rounded-full"></div>
                <div class="flex items-center space-x-2" id="step3-indicator">
                    <div class="w-8 h-8 rounded-full border-2 step-pending flex items-center justify-center">
                        <i class="fa fa-phone text-sm"></i>
                    </div>
                    <span class="text-sm font-medium text-gray-600">跟进信息</span>
                </div>
                <div class="flex-1 mx-4 h-1 bg-gray-200 rounded-full"></div>
                <div class="flex items-center space-x-2" id="step4-indicator">
                    <div class="w-8 h-8 rounded-full border-2 step-pending flex items-center justify-center">
                        <i class="fa fa-check text-sm"></i>
                    </div>
                    <span class="text-sm font-medium text-gray-600">完成</span>
                </div>
            </div>
        </div>

        <!-- 表单卡片 -->
        <div class="bg-white rounded-2xl card-shadow p-8 mb-8">
            <!-- 步骤1：客户基本信息 -->
            <div id="step1" class="step-content" style="display: block;">
                <h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
                    <i class="fa fa-user-circle text-primary mr-3"></i>
                    客户基本信息
                </h2>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- 左侧列 -->
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                <span class="text-danger">*</span> 销售顾问
                            </label>
                            <input type="text" id="sales_consultant" required
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg form-input-focus">
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                <span class="text-danger">*</span> 建卡日期
                            </label>
                            <input type="date" id="create_date" required
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg form-input-focus">
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                <span class="text-danger">*</span> 客户姓名
                            </label>
                            <input type="text" id="customer_name" required
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg form-input-focus">
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">性别</label>
                            <div class="flex space-x-6">
                                <label class="flex items-center">
                                    <input type="radio" name="gender" value="男" class="mr-2 text-primary">
                                    <span>男</span>
                                </label>
                                <label class="flex items-center">
                                    <input type="radio" name="gender" value="女" class="mr-2 text-primary">
                                    <span>女</span>
                                </label>
                            </div>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">生日</label>
                            <input type="date" id="birthday"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg form-input-focus">
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">身份证号码</label>
                            <input type="text" id="id_card"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg form-input-focus">
                        </div>
                    </div>
                    
                    <!-- 右侧列 -->
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">单位名称</label>
                            <input type="text" id="company"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg form-input-focus">
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">单位联系人</label>
                            <input type="text" id="company_contact"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg form-input-focus">
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                <span class="text-danger">*</span> 联系地址
                            </label>
                            <textarea id="address" rows="2" required
                                      class="w-full px-4 py-3 border border-gray-300 rounded-lg form-input-focus"></textarea>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                <span class="text-danger">*</span> 手机号码
                            </label>
                            <input type="tel" id="phone" required
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg form-input-focus">
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">固定电话</label>
                            <input type="tel" id="fixed_phone"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg form-input-focus">
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">现有车辆型号</label>
                            <input type="text" id="existing_car"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg form-input-focus">
                        </div>
                    </div>
                </div>
            </div>

            <!-- 步骤2：购车需求 -->
            <div id="step2" class="step-content">
                <h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
                    <i class="fa fa-car text-primary mr-3"></i>
                    购车需求信息
                </h2>
                
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <!-- 左侧列 -->
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                <span class="text-danger">*</span> 拟购方式
                            </label>
                            <div class="grid grid-cols-2 gap-3">
                                <label class="flex items-center p-3 border border-gray-200 rounded-lg hover:border-primary transition-colors">
                                    <input type="radio" name="purchase_method" value="首次购车" class="mr-2 text-primary">
                                    <span>首次购车</span>
                                </label>
                                <label class="flex items-center p-3 border border-gray-200 rounded-lg hover:border-primary transition-colors">
                                    <input type="radio" name="purchase_method" value="换购" class="mr-2 text-primary">
                                    <span>换购</span>
                                </label>
                                <label class="flex items-center p-3 border border-gray-200 rounded-lg hover:border-primary transition-colors">
                                    <input type="radio" name="purchase_method" value="添购" class="mr-2 text-primary">
                                    <span>添购</span>
                                </label>
                                <label class="flex items-center p-3 border border-gray-200 rounded-lg hover:border-primary transition-colors">
                                    <input type="radio" name="purchase_method" value="其他" class="mr-2 text-primary">
                                    <span>其他</span>
                                </label>
                            </div>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                <span class="text-danger">*</span> 考虑车型
                            </label>
                            <input type="text" id="target_car" required
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg form-input-focus">
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">购车预算</label>
                            <input type="text" id="budget"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg form-input-focus">
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                <span class="text-danger">*</span> 购车时间
                            </label>
                            <div class="space-y-2">
                                <div class="grid grid-cols-2 gap-3">
                                    <label class="flex items-center p-2 border border-gray-200 rounded-lg">
                                        <input type="radio" name="purchase_time" value="今日" class="mr-2 text-primary">
                                        <span>今日</span>
                                    </label>
                                    <label class="flex items-center p-2 border border-gray-200 rounded-lg">
                                        <input type="radio" name="purchase_time" value="本周" class="mr-2 text-primary">
                                        <span>本周</span>
                                    </label>
                                    <label class="flex items-center p-2 border border-gray-200 rounded-lg">
                                        <input type="radio" name="purchase_time" value="本月" class="mr-2 text-primary">
                                        <span>本月</span>
                                    </label>
                                    <label class="flex items-center p-2 border border-gray-200 rounded-lg">
                                        <input type="radio" name="purchase_time" value="三月内" class="mr-2 text-primary">
                                        <span>三月内</span>
                                    </label>
                                </div>
                                <input type="text" id="other_time" placeholder="预计时间（三个月以上）"
                                       class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus">
                            </div>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">配置需求</label>
                            <div class="grid grid-cols-2 gap-2">
                                <label class="flex items-center text-sm">
                                    <input type="checkbox" name="config" value="发动机" class="mr-2 text-primary">
                                    <span>发动机</span>
                                </label>
                                <label class="flex items-center text-sm">
                                    <input type="checkbox" name="config" value="轮胎" class="mr-2 text-primary">
                                    <span>轮胎</span>
                                </label>
                                <label class="flex items-center text-sm">
                                    <input type="checkbox" name="config" value="变速箱" class="mr-2 text-primary">
                                    <span>变速箱</span>
                                </label>
                                <label class="flex items-center text-sm">
                                    <input type="checkbox" name="config" value="驾驶室" class="mr-2 text-primary">
                                    <span>驾驶室</span>
                                </label>
                                <label class="flex items-center text-sm">
                                    <input type="checkbox" name="config" value="车桥" class="mr-2 text-primary">
                                    <span>车桥</span>
                                </label>
                                <label class="flex items-center text-sm">
                                    <input type="checkbox" name="config" value="驱动" class="mr-2 text-primary">
                                    <span>驱动</span>
                                </label>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 右侧列 -->
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">客户关注</label>
                            <div class="grid grid-cols-2 gap-2">
                                <label class="flex items-center text-sm">
                                    <input type="checkbox" name="concern" value="品牌" class="mr-2 text-primary">
                                    <span>品牌</span>
                                </label>
                                <label class="flex items-center text-sm">
                                    <input type="checkbox" name="concern" value="外观" class="mr-2 text-primary">
                                    <span>外观</span>
                                </label>
                                <label class="flex items-center text-sm">
                                    <input type="checkbox" name="concern" value="配置" class="mr-2 text-primary">
                                    <span>配置</span>
                                </label>
                                <label class="flex items-center text-sm">
                                    <input type="checkbox" name="concern" value="安全" class="mr-2 text-primary">
                                    <span>安全</span>
                                </label>
                                <label class="flex items-center text-sm">
                                    <input type="checkbox" name="concern" value="操控" class="mr-2 text-primary">
                                    <span>操控</span>
                                </label>
                                <label class="flex items-center text-sm">
                                    <input type="checkbox" name="concern" value="舒适" class="mr-2 text-primary">
                                    <span>舒适</span>
                                </label>
                                <label class="flex items-center text-sm">
                                    <input type="checkbox" name="concern" value="性能" class="mr-2 text-primary">
                                    <span>性能</span>
                                </label>
                                <label class="flex items-center text-sm">
                                    <input type="checkbox" name="concern" value="油耗" class="mr-2 text-primary">
                                    <span>油耗</span>
                                </label>
                                <label class="flex items-center text-sm">
                                    <input type="checkbox" name="concern" value="质量" class="mr-2 text-primary">
                                    <span>质量</span>
                                </label>
                                <label class="flex items-center text-sm">
                                    <input type="checkbox" name="concern" value="售后服务" class="mr-2 text-primary">
                                    <span>售后服务</span>
                                </label>
                                <label class="flex items-center text-sm">
                                    <input type="checkbox" name="concern" value="金融服务" class="mr-2 text-primary">
                                    <span>金融服务</span>
                                </label>
                            </div>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">使用者</label>
                            <div class="grid grid-cols-2 gap-3">
                                <label class="flex items-center p-2 border border-gray-200 rounded-lg">
                                    <input type="radio" name="user" value="本人驾驶" class="mr-2 text-primary">
                                    <span>本人驾驶</span>
                                </label>
                                <label class="flex items-center p-2 border border-gray-200 rounded-lg">
                                    <input type="radio" name="user" value="他人驾驶" class="mr-2 text-primary">
                                    <span>他人驾驶</span>
                                </label>
                            </div>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                <span class="text-danger">*</span> 购车用途
                            </label>
                            <div class="grid grid-cols-2 gap-2">
                                <label class="flex items-center text-sm">
                                    <input type="checkbox" name="usage" value="矿山" class="mr-2 text-primary">
                                    <span>矿山</span>
                                </label>
                                <label class="flex items-center text-sm">
                                    <input type="checkbox" name="usage" value="港口" class="mr-2 text-primary">
                                    <span>港口</span>
                                </label>
                                <label class="flex items-center text-sm">
                                    <input type="checkbox" name="usage" value="长途运输" class="mr-2 text-primary">
                                    <span>长途运输</span>
                                </label>
                                <label class="flex items-center text-sm">
                                    <input type="checkbox" name="usage" value="工地" class="mr-2 text-primary">
                                    <span>工地</span>
                                </label>
                                <label class="flex items-center text-sm">
                                    <input type="checkbox" name="usage" value="其他" class="mr-2 text-primary">
                                    <span>其他</span>
                                </label>
                            </div>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">购买方式</label>
                            <div class="grid grid-cols-2 gap-3">
                                <label class="flex items-center p-2 border border-gray-200 rounded-lg">
                                    <input type="radio" name="payment_method" value="现金" class="mr-2 text-primary">
                                    <span>现金</span>
                                </label>
                                <label class="flex items-center p-2 border border-gray-200 rounded-lg">
                                    <input type="radio" name="payment_method" value="分期" class="mr-2 text-primary">
                                    <span>分期</span>
                                </label>
                            </div>
                            <div class="grid grid-cols-2 gap-3 mt-2">
                                <input type="text" id="down_payment" placeholder="首付率"
                                       class="px-3 py-2 border border-gray-300 rounded-lg form-input-focus">
                                <input type="text" id="installment_years" placeholder="分期年限"
                                       class="px-3 py-2 border border-gray-300 rounded-lg form-input-focus">
                            </div>
                            <input type="text" id="monthly_payment" placeholder="月还款"
                                   class="w-full mt-2 px-3 py-2 border border-gray-300 rounded-lg form-input-focus">
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">上装情况</label>
                            <input type="text" id="installation"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg form-input-focus">
                        </div>
                    </div>
                </div>
            </div>

            <!-- 步骤3：跟进信息 -->
            <div id="step3" class="step-content">
                <h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
                    <i class="fa fa-phone text-primary mr-3"></i>
                    跟进信息
                </h2>
                
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <!-- 左侧列 -->
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">比较车型1</label>
                            <input type="text" id="compare_car1"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg form-input-focus">
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">考虑原因1</label>
                            <textarea id="reason1" rows="2"
                                      class="w-full px-4 py-3 border border-gray-300 rounded-lg form-input-focus"></textarea>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">比较车型2</label>
                            <input type="text" id="compare_car2"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg form-input-focus">
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">考虑原因2</label>
                            <textarea id="reason2" rows="2"
                                      class="w-full px-4 py-3 border border-gray-300 rounded-lg form-input-focus"></textarea>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">喜欢的联系方式</label>
                            <div class="grid grid-cols-2 gap-2">
                                <label class="flex items-center text-sm">
                                    <input type="checkbox" name="contact_method" value="手机" class="mr-2 text-primary">
                                    <span>手机</span>
                                </label>
                                <label class="flex items-center text-sm">
                                    <input type="checkbox" name="contact_method" value="固定电话" class="mr-2 text-primary">
                                    <span>固定电话</span>
                                </label>
                                <label class="flex items-center text-sm">
                                    <input type="checkbox" name="contact_method" value="短信" class="mr-2 text-primary">
                                    <span>短信</span>
                                </label>
                                <label class="flex items-center text-sm">
                                    <input type="checkbox" name="contact_method" value="QQ/微信" class="mr-2 text-primary">
                                    <span>QQ/微信</span>
                                </label>
                            </div>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">适合跟进的时间</label>
                            <div class="space-y-2">
                                <div class="grid grid-cols-2 gap-2">
                                    <label class="flex items-center text-sm">
                                        <input type="checkbox" name="follow_time" value="周末" class="mr-2 text-primary">
                                        <span>周末</span>
                                    </label>
                                    <label class="flex items-center text-sm">
                                        <input type="checkbox" name="follow_time" value="工作日" class="mr-2 text-primary">
                                        <span>工作日</span>
                                    </label>
                                    <label class="flex items-center text-sm">
                                        <input type="checkbox" name="follow_time" value="白天" class="mr-2 text-primary">
                                        <span>白天</span>
                                    </label>
                                    <label class="flex items-center text-sm">
                                        <input type="checkbox" name="follow_time" value="晚上" class="mr-2 text-primary">
                                        <span>晚上</span>
                                    </label>
                                    <label class="flex items-center text-sm">
                                        <input type="checkbox" name="follow_time" value="任何时间" class="mr-2 text-primary">
                                        <span>任何时间</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 右侧列 -->
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                <span class="text-danger">*</span> 客户来源
                            </label>
                            <div class="grid grid-cols-2 gap-2">
                                <label class="flex items-center text-sm">
                                    <input type="checkbox" name="source" value="媒体" class="mr-2 text-primary">
                                    <span>媒体</span>
                                </label>
                                <label class="flex items-center text-sm">
                                    <input type="checkbox" name="source" value="转介绍" class="mr-2 text-primary">
                                    <span>转介绍</span>
                                </label>
                                <label class="flex items-center text-sm">
                                    <input type="checkbox" name="source" value="店面效应" class="mr-2 text-primary">
                                    <span>店面效应</span>
                                </label>
                                <label class="flex items-center text-sm">
                                    <input type="checkbox" name="source" value="车展" class="mr-2 text-primary">
                                    <span>车展</span>
                                </label>
                                <label class="flex items-center text-sm">
                                    <input type="checkbox" name="source" value="巡展" class="mr-2 text-primary">
                                    <span>巡展</span>
                                </label>
                                <label class="flex items-center text-sm">
                                    <input type="checkbox" name="source" value="座谈会" class="mr-2 text-primary">
                                    <span>座谈会</span>
                                </label>
                            </div>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">介绍人</label>
                            <input type="text" id="referrer_name"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg form-input-focus">
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">介绍人手机</label>
                            <input type="tel" id="referrer_phone"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg form-input-focus">
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                <span class="text-danger">*</span> 首次跟进方式
                            </label>
                            <div class="grid grid-cols-2 gap-3">
                                <label class="flex items-center p-3 border border-gray-200 rounded-lg hover:border-primary transition-colors">
                                    <input type="radio" name="first_contact" value="来电" class="mr-2 text-primary">
                                    <span>来电</span>
                                </label>
                                <label class="flex items-center p-3 border border-gray-200 rounded-lg hover:border-primary transition-colors">
                                    <input type="radio" name="first_contact" value="来店" class="mr-2 text-primary">
                                    <span>来店</span>
                                </label>
                                <label class="flex items-center p-3 border border-gray-200 rounded-lg hover:border-primary transition-colors">
                                    <input type="radio" name="first_contact" value="去电" class="mr-2 text-primary">
                                    <span>去电</span>
                                </label>
                                <label class="flex items-center p-3 border border-gray-200 rounded-lg hover:border-primary transition-colors">
                                    <input type="radio" name="first_contact" value="拜访" class="mr-2 text-primary">
                                    <span>拜访</span>
                                </label>
                            </div>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                <span class="text-danger">*</span> 跟进纪要
                            </label>
                            <textarea id="follow_notes" rows="3" required
                                      class="w-full px-4 py-3 border border-gray-300 rounded-lg form-input-focus"></textarea>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">下次跟进日期</label>
                            <input type="date" id="next_follow_date"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg form-input-focus">
                        </div>
                    </div>
                </div>
            </div>

            <!-- 步骤4：完成 -->
            <div id="step4" class="step-content text-center">
                <div class="space-y-6">
                    <div class="w-24 h-24 bg-success rounded-full flex items-center justify-center mx-auto">
                        <i class="fa fa-check text-white text-4xl"></i>
                    </div>
                    
                    <h2 class="text-3xl font-bold text-gray-900">客户档案创建成功！</h2>
                    <p class="text-lg text-gray-600 max-w-2xl mx-auto">
                        您已成功创建客户管理档案，系统将自动为您生成客户编号和跟进计划。
                    </p>
                    
                    <div class="bg-gray-50 rounded-xl p-6 max-w-2xl mx-auto">
                        <h3 class="text-xl font-semibold text-gray-900 mb-4">客户信息摘要</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-left">
                            <div>
                                <p class="text-sm text-gray-600">客户姓名</p>
                                <p class="font-medium text-gray-900" id="summary_name"></p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-600">联系电话</p>
                                <p class="font-medium text-gray-900" id="summary_phone"></p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-600">考虑车型</p>
                                <p class="font-medium text-gray-900" id="summary_car"></p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-600">建卡日期</p>
                                <p class="font-medium text-gray-900" id="summary_date"></p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="flex flex-col sm:flex-row gap-4 justify-center">
                        <button onclick="window.location.reload()" 
                                class="btn-secondary">
                            <i class="fa fa-plus mr-2"></i>
                            创建新客户档案
                        </button>
                        <button onclick="exportPDF()" 
                                class="btn-primary">
                            <i class="fa fa-download mr-2"></i>
                            导出客户档案
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 操作按钮 -->
        <div class="flex justify-between items-center">
            <button id="prevBtn" onclick="previousStep()" 
                    class="btn-secondary hidden">
                <i class="fa fa-arrow-left mr-2"></i>
                上一步
            </button>
            
            <div class="text-sm text-gray-600">
                第 <span id="currentStep">1</span> 步 / 共 4 步
            </div>
            
            <button id="nextBtn" onclick="nextStep()" 
                    class="btn-primary">
                下一步
                <i class="fa fa-arrow-right ml-2"></i>
            </button>
            
            <button id="submitBtn" onclick="submitForm()" 
                    class="btn-primary hidden">
                提交档案
                <i class="fa fa-check ml-2"></i>
            </button>
        </div>
    </main>

    <!-- 底部信息 -->
    <footer class="bg-white border-t border-gray-200 mt-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
            <div class="text-center text-sm text-gray-600">
                <p>&copy; 2025 客户管理系统 - 汽车销售专用</p>
            </div>
        </div>
    </footer>

    <!-- 通知组件 -->
    <div id="notification" class="notification">
        <div class="flex items-center space-x-2">
            <i id="notification-icon" class="fa fa-info-circle"></i>
            <span id="notification-message"></span>
        </div>
    </div>

    <script>
        // 全局变量
        let currentStep = 1;
        const totalSteps = 4;

        // 初始化页面
        document.addEventListener('DOMContentLoaded', function() {
            // 设置默认日期为今天
            const today = new Date().toISOString().split('T')[0];
            document.getElementById('create_date').value = today;
            document.getElementById('next_follow_date').value = today;
            
            // 添加表单验证
            addFormValidation();
            
            // 确保第一步显示
            showStep(1);
        });

        // 显示指定步骤
        function showStep(step) {
            // 隐藏所有步骤
            document.querySelectorAll('.step-content').forEach(el => {
                el.style.display = 'none';
            });
            
            // 显示指定步骤
            document.getElementById('step' + step).style.display = 'block';
            updateProgress();
        }

        // 步骤导航
        function nextStep() {
            if (validateStep(currentStep)) {
                if (currentStep < totalSteps) {
                    currentStep++;
                    showStep(currentStep);
                    
                    if (currentStep === totalSteps) {
                        document.getElementById('nextBtn').classList.add('hidden');
                        document.getElementById('submitBtn').classList.remove('hidden');
                        showSummary();
                    }
                }
            }
        }

        function previousStep() {
            if (currentStep > 1) {
                currentStep--;
                showStep(currentStep);
                
                if (currentStep < totalSteps) {
                    document.getElementById('nextBtn').classList.remove('hidden');
                    document.getElementById('submitBtn').classList.add('hidden');
                }
            }
        }

        function updateProgress() {
            // 更新进度条
            const progress = (currentStep / totalSteps) * 100;
            document.getElementById('progress-bar').style.width = progress + '%';
            
            // 更新步骤指示器
            for (let i = 1; i <= totalSteps; i++) {
                const indicator = document.getElementById(`step${i}-indicator`);
                const circle = indicator.querySelector('div');
                const text = indicator.querySelector('span');
                
                if (i < currentStep) {
                    circle.className = 'w-8 h-8 rounded-full border-2 step-completed flex items-center justify-center';
                    text.className = 'text-sm font-medium text-success';
                    circle.innerHTML = '<i class="fa fa-check text-sm"></i>';
                } else if (i === currentStep) {
                    circle.className = 'w-8 h-8 rounded-full border-2 step-active flex items-center justify-center';
                    text.className = 'text-sm font-medium text-primary';
                } else {
                    circle.className = 'w-8 h-8 rounded-full border-2 step-pending flex items-center justify-center';
                    text.className = 'text-sm font-medium text-gray-600';
                }
            }
            
            // 更新当前步骤显示
            document.getElementById('currentStep').textContent = currentStep;
            
            // 更新按钮状态
            document.getElementById('prevBtn').classList.toggle('hidden', currentStep === 1);
        }

        // 表单验证
        function validateStep(step) {
            let isValid = true;
            const requiredFields = document.querySelectorAll(`#step${step} [required]`);
            
            requiredFields.forEach(field => {
                if (!field.value.trim()) {
                    isValid = false;
                    showError(field, '此字段为必填项');
                } else {
                    clearError(field);
                }
            });
            
            // 特殊验证
            if (step === 1) {
                const phone = document.getElementById('phone');
                if (phone.value && !/^1[3-9]\d{9}$/.test(phone.value)) {
                    isValid = false;
                    showError(phone, '请输入正确的手机号码');
                }
            }
            
            if (!isValid) {
                // 滚动到第一个错误字段
                const firstError = document.querySelector('.error-message');
                if (firstError) {
                    firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
                }
            }
            
            return isValid;
        }

        function showError(field, message) {
            clearError(field);
            field.classList.add('border-danger');
            
            const errorDiv = document.createElement('div');
            errorDiv.className = 'error-message text-danger text-xs mt-1';
            errorDiv.textContent = message;
            field.parentNode.appendChild(errorDiv);
        }

        function clearError(field) {
            field.classList.remove('border-danger');
            const existingError = field.parentNode.querySelector('.error-message');
            if (existingError) {
                existingError.remove();
            }
        }

        function addFormValidation() {
            const inputs = document.querySelectorAll('input, textarea, select');
            inputs.forEach(input => {
                input.addEventListener('blur', function() {
                    if (this.hasAttribute('required') && !this.value.trim()) {
                        showError(this, '此字段为必填项');
                    } else {
                        clearError(this);
                    }
                });
            });
        }

        // 显示摘要信息
        function showSummary() {
            document.getElementById('summary_name').textContent = 
                document.getElementById('customer_name').value || '未填写';
            document.getElementById('summary_phone').textContent = 
                document.getElementById('phone').value || '未填写';
            document.getElementById('summary_car').textContent = 
                document.getElementById('target_car').value || '未填写';
            document.getElementById('summary_date').textContent = 
                document.getElementById('create_date').value || '未填写';
        }

        // 提交表单
        function submitForm() {
            if (confirm('确认提交客户档案吗？提交后将无法修改。')) {
                // 收集表单数据
                const formData = collectFormData();
                
                // 保存到本地存储
                saveCustomerData(formData);
                
                // 显示成功提示
                showNotification('客户档案已成功保存！', 'success');
                
                // 跳转到完成页面
                currentStep = 4;
                showStep(currentStep);
                document.getElementById('nextBtn').classList.add('hidden');
                document.getElementById('submitBtn').classList.add('hidden');
            }
        }

        function collectFormData() {
            const data = {
                // 基本信息
                sales_consultant: document.getElementById('sales_consultant').value,
                create_date: document.getElementById('create_date').value,
                customer_name: document.getElementById('customer_name').value,
                gender: document.querySelector('input[name="gender"]:checked')?.value,
                birthday: document.getElementById('birthday').value,
                id_card: document.getElementById('id_card').value,
                company: document.getElementById('company').value,
                company_contact: document.getElementById('company_contact').value,
                address: document.getElementById('address').value,
                phone: document.getElementById('phone').value,
                fixed_phone: document.getElementById('fixed_phone').value,
                existing_car: document.getElementById('existing_car').value,
                
                // 购车需求
                purchase_method: document.querySelector('input[name="purchase_method"]:checked')?.value,
                target_car: document.getElementById('target_car').value,
                budget: document.getElementById('budget').value,
                purchase_time: document.querySelector('input[name="purchase_time"]:checked')?.value,
                other_time: document.getElementById('other_time').value,
                config: Array.from(document.querySelectorAll('input[name="config"]:checked')).map(cb => cb.value),
                concern: Array.from(document.querySelectorAll('input[name="concern"]:checked')).map(cb => cb.value),
                user: document.querySelector('input[name="user"]:checked')?.value,
                usage: Array.from(document.querySelectorAll('input[name="usage"]:checked')).map(cb => cb.value),
                payment_method: document.querySelector('input[name="payment_method"]:checked')?.value,
                down_payment: document.getElementById('down_payment').value,
                installment_years: document.getElementById('installment_years').value,
                monthly_payment: document.getElementById('monthly_payment').value,
                installation: document.getElementById('installation').value,
                
                // 跟进信息
                compare_car1: document.getElementById('compare_car1').value,
                reason1: document.getElementById('reason1').value,
                compare_car2: document.getElementById('compare_car2').value,
                reason2: document.getElementById('reason2').value,
                contact_method: Array.from(document.querySelectorAll('input[name="contact_method"]:checked')).map(cb => cb.value),
                follow_time: Array.from(document.querySelectorAll('input[name="follow_time"]:checked')).map(cb => cb.value),
                source: Array.from(document.querySelectorAll('input[name="source"]:checked')).map(cb => cb.value),
                referrer_name: document.getElementById('referrer_name').value,
                referrer_phone: document.getElementById('referrer_phone').value,
                first_contact: document.querySelector('input[name="first_contact"]:checked')?.value,
                follow_notes: document.getElementById('follow_notes').value,
                next_follow_date: document.getElementById('next_follow_date').value,
                
                // 系统信息
                customer_id: generateCustomerId(),
                create_time: new Date().toISOString()
            };
            
            return data;
        }

        function generateCustomerId() {
            const date = new Date();
            const year = date.getFullYear().toString().slice(2);
            const month = (date.getMonth() + 1).toString().padStart(2, '0');
            const day = date.getDate().toString().padStart(2, '0');
            const random = Math.floor(Math.random() * 1000).toString().padStart(3, '0');
            return `GLK-${year}${month}${day}-${random}`;
        }

        function saveCustomerData(data) {
            // 保存到本地存储
            let customers = JSON.parse(localStorage.getItem('customers') || '[]');
            customers.push(data);
            localStorage.setItem('customers', JSON.stringify(customers));
        }

        // 导出PDF功能（模拟）
        function exportPDF() {
            showNotification('正在生成PDF文件...', 'info');
            
            // 模拟PDF生成过程
            setTimeout(() => {
                const link = document.createElement('a');
                link.href = 'javascript:void(0)';
                link.download = `客户档案-${document.getElementById('customer_name').value || '未知客户'}.pdf`;
                link.click();
                
                showNotification('PDF文件导出成功！', 'success');
            }, 1500);
        }

        // 通知功能
        function showNotification(message, type = 'info') {
            const notification = document.getElementById('notification');
            const icon = document.getElementById('notification-icon');
            const messageEl = document.getElementById('notification-message');
            
            // 设置样式
            notification.className = 'notification show';
            const colors = {
                success: 'bg-success text-white',
                error: 'bg-danger text-white',
                info: 'bg-primary text-white',
                warning: 'bg-accent text-white'
            };
            
            const icons = {
                success: 'fa-check-circle',
                error: 'fa-times-circle',
                info: 'fa-info-circle',
                warning: 'fa-exclamation-circle'
            };
            
            notification.className += ` ${colors[type]}`;
            icon.className = `fa ${icons[type]}`;
            messageEl.textContent = message;
            
            // 自动隐藏
            setTimeout(() => {
                notification.classList.remove('show');
            }, 3000);
        }

        // 键盘导航支持
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                if (currentStep < totalSteps) {
                    nextStep();
                } else if (currentStep === totalSteps) {
                    submitForm();
                }
            } else if (e.key === 'Backspace' && currentStep > 1) {
                previousStep();
            }
        });

        // 平滑滚动
        document.documentElement.style.scrollBehavior = 'smooth';
    </script>
</body>
</html>